<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>房源管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增房源</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <!-- card 1 -->
      <el-card>
        <div class="title-box">基本信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房源名称" prop="name">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="价格"
              prop="univalenceDay"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入每平方米每天价格"
                type="text"
                v-model.number="query.univalenceDay"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="面积"
              prop="housingArea"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.housingArea"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20"></el-row>

        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="省"
              prop="province"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.province"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="市"
              prop="city"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.city"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="地址(县/区)"
              prop="county"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.county"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="详细地址"
              prop="address"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.address"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="门牌号"
              prop="houseNumber"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.houseNumber"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房源类型">
              <el-select
                v-model="query.type"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option label="园区" :value="1"></el-option>
                <el-option label="写字楼" :value="2"></el-option>
                <el-option label="个人" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="所属楼层"
              prop="floor"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.floor"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="楼层总层数"
              prop="totalFloor"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.totalFloor"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否可注册">
              <el-select
                v-model="query.whetherEnterprise"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option label="可注册" :value="0"></el-option>
                <el-option label="不可注册" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="使用率"
              prop="utilizationRate"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.utilizationRate"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="工位"
              prop="workCount"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.workCount"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="装修情况"
              prop="fitmentCase"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.fitmentCase"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="支付类型"
              prop="paymentMethod"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.paymentMethod"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="租期"
              prop="leaseTerm"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.leaseTerm"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="房源标签"
              prop="housingLabel"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入，多标签请用;隔开"
                type="text"
                v-model.trim="query.housingLabel"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="封面标签"
              prop="coverLabel"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入，多标签请用;隔开"
                type="text"
                v-model.trim="query.coverLabel"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上架状态" prop="shelfStatus">
              <el-select
                v-model="query.shelfStatus"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option label="未上架" :value="0"></el-option>
                <el-option label="上架" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="房源亮点"
              prop="highlights"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="textarea"
                :rows="3"
                v-model.trim="query.highlights"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 6 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="上传房源图片" prop="indexImage">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._indexImage"
                :limit="5"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上传房源视频(视频点击放大预览)" prop="indexImage">
              <img-upload
                tip="建议:文件小于10M"
                v-model="query._propertyCard"
                :limit="5"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- card 2 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">经纪人信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="关联经纪人">
              <el-select
                v-model="query.housingAgentId"
                placeholder="请选择"
                @change="housingAgentChange()"
                style="width: 80%"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="(item, index) in HousingAgent"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经纪人名称"
              prop="agentName"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.agentName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纪人联系方式" prop="agentPhone">
              <el-input
                maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.agentPhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- card 4-->
      <el-card style="margin: 20px 0">
        <div class="title-box">所属者信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属身份">
              <el-select
                v-model="query.type"
                placeholder="请选择"
                style="width: 80%"
                @change="typeChang()"
              >
                <el-option label="园区" :value="1"></el-option>
                <el-option label="写字楼" :value="2"></el-option>
                <el-option label="个人" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 园区类型 -->
            <el-form-item
              label="所属者名称"
              prop="gardenId"
              :rules="[{ required: true, message: '字段不能为空' }]"
              v-if="query.type == 1"
            >
              <!-- 园区和写字楼列表 -->
              <el-select
                v-model="query.gardenId"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  :label="item.gardenName"
                  :value="item.id"
                  v-for="(item, index) in GardenList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 写字楼类型 -->
            <el-form-item
              label="所属者名称"
              prop="gardenId"
              :rules="[{ required: true, message: '字段不能为空' }]"
              v-else-if="query.type == 2"
            >
              <!-- 园区和写字楼列表 -->
              <el-select
                v-model="query.gardenId"
                placeholder="请选择"
                style="width: 80%"
                @change="floorhange()"
              >
                <el-option
                  :label="item.gardenName"
                  :value="item.id"
                  v-for="(item, index) in FloorList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 房东类型 -->
            <el-form-item
              label="所属者名称"
              prop="housingMasterId"
              :rules="[{ required: true, message: '字段不能为空' }]"
              v-else-if="query.type == 3"
            >
              <!-- 房东列表 -->
              <el-select
                v-model="query.housingMasterId"
                placeholder="请选择"
                style="width: 80%"
                @change="housingMasterChange()"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="(item, index) in HousingMaster"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="所属者名称"
              prop="housingMasterId"
              :rules="[{ required: true, message: '字段不能为空' }]"
              v-else
            >
              <!-- 房东列表 -->
              <el-select
                v-model="query._housingMasterId"
                placeholder="请选择"
                style="width: 80%"
                @change="housingMasterChange()"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="(item, index) in HousingMaster"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="所属者联系方式"
              prop="gardenPhone"
              v-if="query.type != 3"
            >
              <el-input
                maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenPhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="所属者联系方式"
              prop="masterPhone"
              v-if="query.type == 3"
            >
              <el-input
                maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.masterPhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="add">保存</el-button>
        </el-form-item>
      </el-card>
    </el-form>
  </d2-container>
</template>
<script>
export default {
  data() {
    return {
      query: {
        agentName: "",
        agentPhone: "",
        masterPhone: "",
        gardenId: "",
        gardenPhone: "",
        masterPhone: "",
      },
      rules: {
        name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
      HousingMaster: [],
      HousingAgent: [],
      GardenList: [], //园区列表
      FloorList: [], //写字楼列表
    };
  },
  methods: {
    add() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
            fileList: [],
          };
          if (this.query._indexImage && this.query._indexImage.length > 0) {
            for (var i = 0; i < this.query._indexImage.length; i++) {
              params.fileList.push({
                image: this.query._indexImage[i].url,
              });
            }
          }
          if (this.query._propertyCard && this.query._propertyCard.length > 0) {
            for (var i = 0; i < this.query._propertyCard.length; i++) {
              params.fileList.push({
                video: this.query._propertyCard[i].url,
              });
            }
          }
          console.log("提交内容：", params);
          this.$axios.post("/wxHousingSource/add", params).then((result) => {
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$router.push("/housing");
              this.$refs["add"].resetFields();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },

    housingAgentChange() {
      let item = this.HousingAgent.filter((ele) => {
        return ele.id == this.query.housingAgentId;
      })[0];
      console.log("变化", item);
      this.query.agentName = item.name;
      this.query.agentPhone = item.phone;
    },
    //园区类型
    gardenChange() {
      let item = this.GardenList.filter((ele) => {
        return ele.id == this.query.gardenId;
      })[0];
      console.log("变化", item);
      this.query.gardenPhone = item.phone;
    },
    //写字楼类型
    floorhange() {
      let item = this.FloorList.filter((ele) => {
        return ele.id == this.query.gardenId;
      })[0];
      console.log("变化", item);
      this.query.gardenPhone = item.phone;
    },
    //个人类型
    housingMasterChange() {
      let item = this.HousingMaster.filter((ele) => {
        return ele.id == this.query.housingMasterId;
      })[0];
      console.log("变化", item);
      this.query.masterPhone = item.phone;
    },
    typeChang() {
      if (this.query.type != 3) {
        this.query.gardenId = "";
        this.query.gardenPhone = "";
      } else {
        this.query.housingMasterId = "";
        this.query.masterPhone = "";
      }
    },
  },
  mounted() {
    this.$axios
      .post("wxHousingMaster/list", { pageNum: 1, pageSize: 999999 })
      .then((res) => {
        this.HousingMaster = res.data;
      });
    this.$axios
      .post("wxHousingAgent/list", { pageNum: 1, pageSize: 999999 })
      .then((res) => {
        this.HousingAgent = res.data;
      });
    //园区列表
    this.$axios
      .post("/wxGarden/list", {
        pageNum: 1,
        pageSize: 999999,
        gardenType: 1,
        shelfStatus: 1,
      })
      .then((res) => {
        this.GardenList = res.data.list;
      });
    //写字楼列表
    this.$axios
      .post("/wxGarden/list", {
        pageNum: 1,
        pageSize: 999999,
        gardenType: 2,
        shelfStatus: 1,
      })
      .then((res) => {
        this.FloorList = res.data.list;
      });
  },
};
</script>
<style scoped lang="scss">
.item-box {
  position: relative;
  width: 30%;
  .item-delete {
    position: absolute;
    right: 80px;
    top: -45px;
  }
}
.card-box {
  display: flex;
  flex-wrap: wrap;
}
</style>